<script setup>
import defaultAvatar from "../assets/assets/default_avatar.png";
import pocket from "../assets/assets/pocket.png";
import english from "../assets/assets/english.png";
import mealCard from "../assets/meal01.png";

import myTeam from "../assets/assets/myTeam.png";
import db from "../assets/assets/db.png";
import ad from "../assets/assets/ad.png";
import bag from "../assets/assets/bag.png";
import avatar from "../assets/assets/avatar.png";
import normal from "../assets/assets/normal.png";
import node from "../assets/assets/node.png";
import star from "../assets/assets/star.png";
import myReaslePng from "../assets/assets/my_release.png";
import quick_deal from "../assets/quickDeal.png";

import i18n from "../i18n/lang/index";
import copy from "../assets/refill/copy.png";
import { http } from "../services/service";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { showToast } from "vant";
import { useUserStore } from "../store/index";
const store = useUserStore();
const i18nUse = useI18n();
const router = useRouter();
const route = useRoute();
const recharge = () => {
  router.push("/refill");
};
const widthDraw = () => {
  router.push("/withDraw");
};
const combine = () => {
  router.push("/combineCard");
};
const myBag = () => {
  router.push("/myBag");
};
const myRealse = () => {
  router.push("/myRealse");
};

const myMealCard = () => {
  router.push("/myMealCard");
};
const routerTo = (url) => {
  router.push(url);
};
const showAToast = () => {
  showToast(i18nUse.t("not_open"));
};
const show = ref(false);

const startCounts = ref([]);

const getUserInfo = () => {
  http.get(`/api/v1/center/into?telegramId=${store.getUser?.telegramId}`).then(
    (response) => {
      const data = response?.data?.data;
      if (response?.data.code === 200) {
        store.setUserInfo({
          ...store.getUser,
          ...data.user,
          userAccout: data.userAccount,
        });
        balance.value = (
          store.getUser?.userAccout?.balance -
          store.getUser?.userAccout?.frozenNumber
        )?.toFixed(2);
        if (store.getUser?.level) {
          for (let i = 0; i < store.getUser?.level; i++) {
            startCounts.value.push("");
          }
        }
      }
    },
    () => {}
  );
};
getUserInfo();
const changeLanguage = () => {
  i18n.global.locale = i18n.global.locale !== "zhCn" ? "zhCn" : "en";
};
const copyTo = () => {
  const input = document.createElement("input");
  input.value = store.getUser?.inviCode;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  showToast({
    message: i18nUse.t("copySuccess"),
    icon: "like-o",
  });
};

const copyUID = () => {
  const input = document.createElement("input");
  input.value = store.getUser?.telegramId;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  showToast({
    message: i18nUse.t("copySuccess"),
    icon: "like-o",
  });
};

const balance = ref(0);
</script>

<template>
  <van-overlay :show="show">
    <div class="wrapper">
      <div class="block">{{ $t("commingSoon") }}</div>
    </div>
  </van-overlay>
  <div class="container">
    <div class="icon">
      <van-image
        round
        width="80px"
        height="80px"
        :src="store.getUser?.photo_url ?? avatar"
      />
      <div
        style="
          font-size: 12px;
          margin-top: 10px;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        UID:{{ store.getUser?.telegramId }}
        <van-icon
          :name="copy"
          size="20"
          class="icon-right"
          @click="copyUID()"
        />
      </div>
      <div style="font-size: 18px; margin-top: 10px; font-weight: 500">
        {{ store.getUser?.first_name }} {{ store.getUser?.last_name }}
      </div>
      <div
        style="
          font-size: 14px;
          margin-top: 10px;
          font-weight: 400;
          color: #ffa31a;
        "
      >
        <span
          style="
            border-right: 2px solid #fff;
            position: relative;
            display: inline-block;
            padding-right: 16px;
            border-color: rgba(255, 255, 255, 0.6);
          "
          :style="{
            color: store.getUser?.type === 'pt' ? '#6989CB' : '#FDBF04',
          }"
        >
          <img
            :src="store.getUser?.type === 'pt' ? normal : node"
            class="level-img"
          />
          {{ store.getUser?.type === "pt" ? $t("normal") : $t("Node") }}
        </span>
        <span class="level">
          <span> LV {{ store.getUser?.level }} </span>
          <span class="star-container">
            <span v-for="c in startCounts">
              <img :src="star" alt="" />
            </span>
          </span>
        </span>
      </div>
      <div
        style="
          font-size: 14px;
          margin-top: 10px;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffa31a;
        "
      >
        <span> {{ $t("invite_code") }}:{{ store.getUser?.inviCode }} </span>
        <van-icon :name="copy" size="20" class="icon-right" @click="copyTo()" />
      </div>
    </div>
    <div class="container-score">
      <div class="start-title">{{ $t("totalStar") }}</div>
      <div style="margin-top: 16px" class="start-container">
        <div
          class="part"
          style="
            width: calc(50% - 10px);
            border-right: 2px solid #555862;
            border-color: rgba(85, 88, 98, 0.6);
          "
        >
          <div class="part-title">{{ $t("Available") }}</div>
          <div class="part-num">
            {{ balance }}
          </div>
        </div>
        <div class="part" style="text-align: center">
          <div class="part-title">{{ $t("Freeze") }}</div>
          <div class="part-num">
            {{ store.getUser?.userAccout?.frozenNumber?.toFixed(2) ?? 0 }}
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="button-container">
      <van-button color="#7232dd" @click="recharge()">{{
        $t("Recharge")
      }}</van-button>
      <van-button color="#7232dd" @click="widthDraw()">{{
        $t("withdraw")
      }}</van-button>
    </div>

    <!-- 操作栏 -->
    <div class="action-container">
      <div
        class="action-item"
        @click="combine()"
        v-if="store.getUser?.type !== 'pt'"
      >
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="pocket" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("combineCard") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div
        class="action-item"
        @click="routerTo('/userMenu')"
      >
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="myTeam" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("user_menu") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>

      <div class="action-item" @click="myBag()">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="bag" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("myBag") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>

      <div class="action-item" @click="routerTo('/myAdd')">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="ad" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("myAds") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="action-item" @click="routerTo('/assetsDetail')">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="db" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("assetsDetail") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>

      <div class="action-item" @click="routerTo('/myTeam')">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="myTeam" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("myTeam") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="action-item" @click="myRealse()">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="ad" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("my_realse") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="action-item" @click="myMealCard()" v-if="store.getUser?.type !== 'pt'">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="mealCard" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("myMealCard") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="action-item" @click="showAToast()">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="quick_deal" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("quick_deal") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="action-item" style="border: none" @click="changeLanguage()">
        <div class="action-left">
          <span style="display: inline-block; margin-right: 10px">
            <img :src="english" alt="" style="width: 23px; height: 23px" />
          </span>
          <span>{{ $t("changeLanguage") }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.star-container {
  position: absolute;
  top: -2px;
  min-width: 110px;
  display: flex;
  left: 52px;
  img {
    display: inline-block;
    width: 19px;
    height: 19px;
    object-fit: contain;
    margin-left: 3px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.icon {
  padding-top: 74px;
  text-align: center;
}
.level-img {
  display: inline-block;
  width: 25px;
  height: 21px;
  object-fit: contain;
  position: absolute;
  top: -3px;
  left: -28px;
}

.container-score {
  width: calc(100% - 32px);
  margin: 20px auto 0 auto;
  height: 90px;
  padding: 22px 0;
  border: 1px solid #9aa7ff;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);

  .start-title {
    font-size: 12px;
    padding: 0 22px;
  }

  .start-container {
    display: flex;
    padding: 0 22px;
    justify-content: space-between;

    .part {
      width: 50%;

      .part-title {
        font-size: 15px;
        font-weight: bold;
      }

      .part-num {
        margin-top: 7px;
        color: #7d66fc;
        font-size: 24px;
        font-family: dinBold;
        font-weight: 700;
        background-image: linear-gradient(to bottom, #9ba8ff, #4a61f9);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}

.button-container {
  width: calc(100% - 32px);
  margin: 10px auto;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;

  button {
    background: linear-gradient(to bottom, #9aa7ff, #4a61f9) !important;
    width: 49%;
    height: 54px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
  }
}

.level {
  padding-left: 16px;
  position: relative;
  color: #fff;
  text-shadow: 0 0 4px #e290e6, 0 0 4px #e290e6, 0 0 4px #e290e6,
    0 0 4px #e290e6, 0 0 4px #e290e6, 0 0 4px #e290e6, 0 0 4px #e290e6;
}

.action-container {
  width: calc(100% - 64px);
  margin: 10px auto;
  border: 2px solid #7d66fc;
  border-color: rgba(125, 102, 252, 0.6);
  min-height: 20px;
  border-radius: 10px;
  padding: 0 16px;

  .action-item {
    display: flex;
    justify-content: space-between;
    height: 43px;
    align-items: center;
    border-bottom: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.3);

    .action-left {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
